<template>
  <!-- 产品 products -->
  <Content>
    <span slot="header-text">艺术涂料产品</span>
    <div slot="main-content">
      <div class="content-img">
        <div class="content-item" v-for="(item,i) in artData" :key="i" @mouseenter="item.is_active = true"
          @mouseleave="item.is_active = false">
          <router-link class="box-products" style="display: block; position: relative;" to="./details">
            <el-image ref="hotheight" :src="item.img" alt="" fit="cover" style="width: 400px; height: 280px"></el-image>
            <!-- <el-image v-show="!item.isActive" ref="hotheight" :src="item.Mask" alt="" fit="cover" style="width: 400px; height: 280px"></el-image> -->
            <div :class="{animationbox:item.is_active}" class="mask">
              <div class="products-e">
                <p v-html="item.EnglishName"></p>
              </div>
              <div class="products-tag">{{item.tag}}</div>
              <div class="products-title">
                <p v-html="item.title"></p>
              </div>
            </div>
          </router-link>
        </div>
      </div>
    </div>
    <el-button slot="button" type="success" round @click="$router.push('/details')">全部产品+</el-button>
  </Content>
</template>

<script>
import Content from '@/components/content/Content.vue'
import './css.css'


export default {
  components: {
    Content
  },
  props:{
    artData:{
      type:Array,
      default(){
        return []
      }
    }
  },
  data () {
    return {
      imgUrl: null,
    }
  },
  methods: {
    //获取数据
    async getData () {
      const { data: ret } = await this.$http.get('/static/data.json')

      let arr = []
      arr = ret.data.products
      this.imgUrl = arr.slice(arr.length - 6, arr.length)
    },
  },
  mounted () {
    this.getData()
  }
}
</script>

<style lang='less' scoped>
.content-img {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  width: 100%;

  .content-item {
    width: 400px;
    height: 280px;
    .el-image {
      width: 100%;
      height: 100%;
    }
    .mask {
      position: absolute;
      top: 0;
      opacity: 0;
      background: transparent;
      width: 100%;
      height: 100%;
    }
  }
}
.el-button {
  margin-top: 1rem;
}
.mask {
  background: #77b828;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  width: 100%;
  height: 100%;
  .products-e {
    font-size: 0.8rem;
    p {
      margin-bottom: 2px;
    }
  }
  .products-tag {
    font-size: 0.8rem;
  }
  .products-tag::after {
    content: "";
    display: block;
    width: 2rem;
    height: 1px;
    background: #fff;
    margin: 0.6rem auto 0.3rem;
  }
  .products-title {
    font-size: 1.5rem;
    font-weight: 500;
    p {
      margin-top: 0.5rem;
    }
  }
}
</style>